let managerArr = [
    { id: 1, name: '张三', figure: '超级管理员', number: '139****4321', email: 'ant**@**eo.com', time: '2019-12-12 12:12:12' },
    { id: 2, name: '李四', figure: '一般管理员', number: '139****4321', email: 'ant**@**eo.com', time: '2019-12-12 12:12:12' },
    { id: 3, name: '王五', figure: '运维人员', number: '139****4321', email: 'ant**@**eo.com', time: '2019-12-12 12:12:12' },
    { id: 4, name: '钱六', figure: '收费员', number: '139****4321', email: 'ant**@**eo.com', time: '2019-12-12 12:12:12' },
    { id: 5, name: '孙齐', figure: '测试权限', number: '139****4321', email: 'ant**@**eo.com', time: '2019-12-12 12:12:12' },
]

let zTbody = document.querySelector('tbody');
let zBtn = document.querySelector('.z-dele-btn');

let zSearchcon=document.querySelector('.z-search-con');
let zSearchbtn=document.querySelector('.z-search-btn');

let zaddtTime = document.querySelector('.z-add-time');
let zAddbtn=document.querySelector('.z-add-btn');
let zAddname=document.querySelector('.z-add-name');
let zAddtel=document.querySelector('.z-add-tel');
let zAddemail=document.querySelector('.z-add-email');
let zAddopt=document.querySelector('.zz-add-opt')


let zSavebtn=document.querySelector('.zz-save-btn');//修改保存按钮
let zEditname=document.querySelector('.zz-edit-name');
let zEdittel=document.querySelector('.zz-edit-tel');
let zEditemail=document.querySelector('.zz-edit-email');
let zEditopt=document.querySelector('.zz-edit-opt');
let zEdittime=document.querySelector('.z-edit-time');
let deleId = 0;
let editId = 0;//修改的id
let id=6;


//页面开始加载，渲染数据
function render(arr){
    let str = ''
for (let i = 0; i < arr.length; i++) {
    str += `<tr>
    <td>${i+1}</td>
    <td>${arr[i].name}</td>
    <td>${arr[i].figure}</td>
    <td>${arr[i].number}</td>
    <td>${arr[i].email}</td>
    <td>${arr[i].time}</td>
    <td data-id="${arr[i].id}">
    <a class="dele" data-toggle="modal" data-target="#delModal"> 删除&nbsp;</a>
    <a class="edit" data-toggle="modal"
        data-target="#editModal">&nbsp;修改</a>
        </td>
  </tr>`
}
zTbody.innerHTML = str;
}
render(managerArr);


//给删除加事件
zTbody.addEventListener('click', function (e) {
    if (e.target.className.includes('dele')) {
        deleId = e.target.parentNode.dataset.id
    }else if(e.target.className.includes('edit')){
        zEditname.value=e.target.parentNode.parentNode.children[1].innerText;
        editId=e.target.parentNode.dataset.id;
        zEdittel.value=e.target.parentNode.parentNode.children[3].innerText;
        zEditemail.value=e.target.parentNode.parentNode.children[4].innerText;
        zEdittime.value=e.target.parentNode.parentNode.children[5].innerText;
        let str=e.target.parentNode.parentNode.children[2].innerText;
        document.querySelector('.edit-class option[value='+str+']').selected=true//在js中注意要取value的值，需要将HTML的值写好；
        editId.e.target.parentNode.dataset.id;

    }
})
//点击弹框的删除的时候删除
zBtn.addEventListener('click', function () {
    for (let i = 0; i < managerArr.length; i++) {
        if (managerArr[i].id == deleId) {
            managerArr.splice(i, 1);
            zSearchcon.value='';
            render(managerArr);
            return;
        }
    }
  
})
//序号变化，当我点击某一项删除的时候，删除的下一项序号顶替被删除的序号；思路，给序号一个数组，点击删除的时候，序号和列表一起删除，然后重新渲染的时候，序号不变

//搜索功能
zSearchbtn.addEventListener('click',function(){
    let listArr=[];
    let str=zSearchcon.value;
    for(let i=0;i<managerArr.length;i++){
        if(managerArr[i].name.includes(str)){
            listArr.push(managerArr[i]);
            zSearchcon.value='';
        }
    }
    render(listArr)
})
//添加的功能
zAddbtn.addEventListener('click',function(){
    managerArr.push({
        id:++id,
        name:zAddname.value,
        number:zAddtel.value,
        email:zAddemail.value,
        figure:zAddopt.value,
        time:zaddtTime.value
    })
    render(managerArr);
})


//修改的保存功能
zSavebtn.addEventListener('click',function(){
    let json={
        id:editId,
        name:zEditname.value,
        number:zEdittel.value,
        email:zEditemail.value,
        figure:zEditopt.value,
        time:zEdittime.value
    }
    for(let i=0;i<managerArr.length;i++){
        if(managerArr[i].id==editId){
            managerArr.splice(i,1,json)
        }
    }
    render(managerArr);
})
